<template>
	<view class="content">
		<view class='header'>
			<view class='person'>
				<!-- 基本资料 -->
				<view class="info">
					<view class="avatar">
						<!-- #ifdef H5 || APP-PLUS -->
						<image v-if="busData.avatar_text" :src="busData.avatar_text"></image>
						<image v-else src="/static/logo.png"></image>
						<!-- #endif -->

						<!-- #ifdef MP-WEIXIN -->
						<image v-if="busData.avatar_text" :src="busData.avatar_text"></image>
						<open-data v-else type="userAvatarUrl"></open-data>
						<!-- #endif -->
					</view>

					<view class="base">
						<view class="nickname" v-if="busData.nickname">{{ busData.nickname }}</view>
						<view class="nickname" v-else>匿名用户</view>
						<view class="desc">这家伙很懒，什么也没写！</view>
					</view>
				</view>

				<!-- 宫格布局 -->
				<view class="grid">
					<u-grid :border="true">
						<u-grid-item>
							<u--text color="#fff" text="提问" align="center"></u--text>
							<u--text color="#fff" :text="PostCount" align="center"></u--text>
						</u-grid-item>
						<u-grid-item>
							<u--text color="#fff" text="回答" align="center"></u--text>
							<u--text color="#fff" :text="CommentCount" align="center"></u--text>
						</u-grid-item>
						<u-grid-item>
							<u--text color="#fff" text="收藏" align="center"></u--text>
							<u--text color="#fff" :text="CollectCount" align="center"></u--text>
						</u-grid-item>
					</u-grid>
				</view>

				<!-- 按钮 -->
				<view class="btnlist">
					<view class="btn">
						<u-button v-if="accessToBusid != business.id && !attStatus" type="success" icon="man-add"
							text="关注"></u-button>
					</view>
					<view class="btn">
						<u-button v-if="accessToBusid != business.id" @click="PrivateLetterShow = true" type="warning"
							icon="more-circle" text="发私信"></u-button>
					</view>
				</view>
			</view>
		</view>

		<u-sticky bgColor="#fff">
			<u-tabs :list="tabsList" @click="CateCheck"></u-tabs>
		</u-sticky>

		<!-- 帖子列表 -->
		<scroll-view class="list" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
			@refresherrefresh="refresh" @scrolltolower="loadmore">
			<view class="item" v-for="(post,index) in tabsCont" :key="index">
				<view class="business">
					<view class="avatar">
						<image mode="aspectFit" v-if="post.business.avatar_text" :src='post.business.avatar_text'></image>
						<image mode="aspectFit" v-else src='/static/avatar.png'></image>
					</view>
					<view class="author">{{ post.business.nickname }}</view>
				</view>

				<view class="info">
					<navigator :url="`/pages/post/info?postid=${post.id}`" class="title">{{ post.title }}</navigator>
					<view class="createtime">发布时间：{{ post.createtime_text }}</view>
					<view class="category">分类：{{ post.cate.name }}</view>

					<view class="join">
						<view class="status">{{ post.status_text }}</view>
						<view class="point">悬赏积分 {{ post.point }}</view>
						<view class="count">{{ post.comment_text }}人参与回复</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 提醒组件 -->
		<u-toast ref="notice"></u-toast>

		<!-- 弹框组件 -->
		<u-modal :show="show" :title="'提醒'" :content="content" showCancelButton :closeOnClickOverlay="true"
			@cancel="show = false" @close="show = false" @confirm="confirm"></u-modal>

		<!-- 发送私信弹出层 -->
		<u-popup :show="PrivateLetterShow" @close="PrivateLetterShow = false">
			<view class="answer">
				<u-form labelPosition="top" labelWidth="150" :model="letter" :rules="rules" ref="answer">
					<!-- 描述 -->
					<u-form-item label="填写私信内容：" prop="content" ref="content">
						<u--textarea v-model="letter.content" placeholder="请输入私信内容"></u--textarea>
					</u-form-item>

					<view class="btn">
						<u-button type="primary" text="发送私信" formType="submit" @click="sending"></u-button>
					</view>
				</u-form>
			</view>
		</u-popup>
	</view>
</template>

<script>
/**
 * 判断个人主页人的id是否与当前使用者id 是否一致，区分出
 * 情况 1 我看别人的个人主页
 * 情况 2 我看我自己的个人主页
 */
export default {
	// 获取到url上的访问者id accessToBusid
	onLoad: function (option) {
		// 登录人账号信息
		this.business = uni.getStorageSync('business') ? uni.getStorageSync('business') : {}
		this.accessToBusid = option.accessToBusid;
		this.GetTabsCont()
	},
	onShow() {
		// 通过 accessToBusid 获取个人主页信息
		this.getCenterData(this.accessToBusid);
	},
	//上拉加载
	onReachBottom() {
		if (this.finished) return;
		this.page++
		this.GetTabsCont()
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	data() {
		return {
			show: false,
			accessToBusid: '',
			business: {},
			content: '是否确认删除',
			action: [{ text: '删除', style: { backgroundColor: 'rgb(245, 108, 108)', } }],
			busData: {}, // 界面显示的用户信息数据（区分出他人访问主页、本人访问主页）
			PostCount: '',
			CommentCount: '',
			CollectCount: '',
			tabsList: [// tabs切换显示数据	// tabs标签
				{ id: 0, name: '我的提问', }, { id: 1, name: '我的回答', }, { id: 2, name: '我的收藏' }],
			tabsCont: [],
			typename: '我的提问',
			page: 1,
			triggered: false,
			finished: false,
			scrollTop: 0,
			CateList: [{ id: 0, name: '全部' }],
			attStatus: false,// 当前界面信息对应的用户是否已被登录用户关注 false 未关注  true 已关注
			PrivateLetterShow: false, // 私信弹出层显示隐藏状态
			letter: {  // 私信内容
				content: ''
			},
			rules: {  // 私信内容验证器
				content: {
					type: 'string',
					required: true,
					message: '请填写私信内容',
					trigger: ['blur', 'change']
				},
			},
		}
	},
	methods: {
		confirm() {
			this.show = false
		},
		/**
		 * 头部信息（用户基本信息）
		 * 需要：用户个人信息
		 * 通过accessToBusid查找，将主页展示的用户信息保存到busData中
		 * 传入当前登录人的id，判断是否被关注 返回attStatus关注状态
		 */
		async getCenterData(id) {
			// 发起请求
			var result = await uni.$u.http.post('/business/getCenterData', { accessToBusid: id, busid: this.business.id });
			if (result.code == 0) {
				this.$refs.notice.show({
					type: 'error',
					message: result.msg
				})
				return false
			}
			this.busData = result.data.business;
			this.PostCount = result.data.PostCount;
			this.CommentCount = result.data.CommentCount;
			this.CollectCount = result.data.CollectCount;
			// 关注状态
			this.attStatus = result.data.attStatus;
		},
		/**
		 * tabs标签切换事件
		 * 通过tabs的typename值，在后台判断不同情况返回不同数据
		 */
		async CateCheck(item) {
			// item 当前点击数据
			this.typename = item.name
			this.refresh()
		},
		//刷新事件
		refresh() {
			this.tabsCont = []
			this.GetTabsCont();
		},
		async GetTabsCont() {
			//组装数据
			var data = {
				page: this.page,
				busid: this.accessToBusid,
				typename: this.typename
			}

			var result = await uni.$u.http.post('/business/GetTabsCont', data)

			//改变下拉的状态
			this.triggered = false

			if (result.code == 0) {

				this.$refs.notice.show({
					type: 'error',
					message: result.msg
				})

				return false
			}
			this.tabsCont = this.tabsCont.concat(result.data)

		},
		loadmore() {
			console.log('上拉加载')
		},
		// 发送私信
		sending() {
			this.$refs.answer.validate()
				.then(async res => {  // 通过表单效验后执行的回调函数
					this.PrivateLetterShow = false

					//未登录
					if (!this.business || !this.business.id) {
						this.$refs.notice.show({
							type: 'error',
							message: '请先登录'
						})

						return false
					}

					//组装数据
					var data = {
						senid: this.business.id, // 发件人id  当前登录的用户id 
						recid: this.accessToBusid, // 收件人id  当前界面显示的用户id
						content: this.letter.content // 私信内容
					}

					var result = await uni.$u.http.post('/messages/add', data)

					if (result.code == 0) {
						this.$refs.notice.show({
							type: 'error',
							message: result.msg
						})
						return false
					} else {
						this.$refs.notice.show({
							type: 'success',
							message: result.msg
						})
						this.letter.content = ''
					}
				}).catch(error => {
					this.$refs.notice.show({
						type: 'error',
						message: '私信内容效验失败'
					})
				})
		}
	}
}
</script>


<style>
.content {
	width: 100%;
	/* overflow-x: hidden; */
}

.person {
	background-image: url("/static/titlebg.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
	padding: 30px 30px 10px;
}

.person .info {
	display: flex;
	width: 100%;
	margin-bottom: 15px;
}

.person .info .avatar {
	width: 4em;
	height: 4em;
	overflow: hidden;
	border-radius: 100%;
	margin-right: 1em;
	flex-shrink: 0;
}

.person .info .avatar image {
	width: 100%;
	height: 100%;
}

.person .info .base {
	color: #fff;
	font-size: 1em;
}

.person .info .base .nickname {
	margin-bottom: 7px;
}

.person .info .base .desc {
	font-size: .8em;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	/* 改成你需要的行数 */
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.person .grid {
	margin-bottom: 15px;
}

.person .btnlist {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: nowrap;
}

.person .btnlist .btn {
	margin-right: 10px;
}


.nav {
	display: flex;
	background-color: #f1f6f9;
	position: relative;
	justify-content: space-around;
	align-items: center;
	align-content: center;
}

.nav .nav-item {
	height: 110rpx;
	line-height: 110rpx;
	text-align: center;
	color: #666;
	font-size: 30rpx;
}

.nav .active {
	color: #000;
	font-weight: 600;
}

.nav .active-line {
	background-color: #038fff;
	width: 35rpx;
	height: 4rpx;
	position: absolute;
	top: 86rpx;
	transition: left 0.2s;
}

.list .item {
	display: flex;
	width: 100%;
	padding: 10px;
	margin: 0 auto;
}

.business {
	width: 20%;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 10px;
	margin-right: 10px;
}

.avatar {
	width: 100%;
	height: 5em;
}

.avatar image {
	width: 100%;
	height: 100%;
}

.author {
	text-align: center;
	font-size: .8em;
	color: #999;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.info {
	font-size: .9em;
	color: #999;
}

.info .title,
.info .createtime,
.info .category,
.info .status,
.info .join {
	margin-bottom: 2px;
}

.info .title {
	font-size: 1.1em;
	width: 95%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #000;
	text-decoration: underline;
	font-weight: bold;
}

.info .status {
	background: #fff8e5;
	color: #fa3534;
	padding: 1px 2px;
	border: 1px solid #fa3534;
	border-radius: 3px;
	margin-right: 5px;
}

.info .join {
	display: flex;
	align-items: center;
	align-content: center;
	color: #fa3534;
}

.count {
	margin-right: 10px;
}

.info .point {
	width: 6em;
	text-align: center;
	background: #fff8e5;
	color: #f19049;
	padding: 2px;
	margin-right: 10px;
}

/* 回答内容 */
.answer {
	padding: 15px;
}
</style>

